import type { ProColumns } from "@ant-design/pro-components";
import { EditableProTable } from "@ant-design/pro-components";
import WeekChooseOfDay from "./components/WeekChoose/WeekChooseOfDay";

import { SelectProps, Form, Tag } from "antd";
import React, { useState, forwardRef, useImperativeHandle } from "react";

const WeeksData: SelectProps["options"] = [
  { label: "周一", value: "周一" },
  { label: "周二", value: "周二" },
  { label: "周三", value: "周三" },
  { label: "周四", value: "周四" },
  { label: "周五", value: "周五" },
  { label: "周六", value: "周六" },
  { label: "周日", value: "周日" },
];

type DataSourceType = {
  id: React.Key;
  days?: string;
  time?: string;
};

export default forwardRef(({ defaultData = [] }, ref) => {
  const [editForm] = Form.useForm();
  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>(() =>
    defaultData.map((item) => item.id)
  );
  const [dataSource, setDataSource] =
    useState<readonly DataSourceType[]>(defaultData);
  const weeksFilter = () => {
    let days: string[] = [];
    dataSource.forEach((element: DataSourceType) => {
      const elArr = element.days?.split(",");
      if (elArr) days.push(...elArr);
    });

    let WeeksDataFilter: SelectProps["options"] = [];

    for (let index = 0; index < WeeksData.length; index++) {
      const element = WeeksData[index];
      if (!days.includes(element.value as string))
        WeeksDataFilter.push(element);
    }
    return WeeksDataFilter;
  };
  const columns: ProColumns<DataSourceType>[] = [
    {
      title: "周",
      dataIndex: "days",
      width: "50%",
      key: "days",
      valueType: "select",
      fieldProps: {
        mode: "multiple",
      },
      formItemProps: {
        rules: [
          {
            required: true,
            message: "此项为必填项",
          },
        ],
      },
      renderFormItem: () => {
        return (
          <WeekChooseOfDay
            dataSource={weeksFilter()}
            onChange={(value) => {}}
          />
        );
      },
      render: (_, row) => {
        let arr = [];
        const rows = row.days?.split(",") ?? [];
        for (let index = 0; index < rows.length; index++) {
          const element = rows[index];

          for (let index = 0; index < WeeksData.length; index++) {
            const day = WeeksData[index];
            if (day.value == (element as unknown as number)) {
              arr.push(<Tag key={day.value}>{day.label}</Tag>);
              break;
            }
          }
        }

        return arr;
      },
    },
    {
      title: "营业时间",
      key: "time",
      dataIndex: "time",
      valueType: "timeRange",
      fieldProps: {
        format: "HH:mm",
        hourStep: 1,
        minuteStep: 15,
      },
      formItemProps: {
        rules: [
          {
            required: true,
            message: "此项为必填项",
          },
        ],
      },
    },
    {
      title: "操作",
      fixed: "right",
      valueType: "option",
      width: 100,
      align: "center",
      render: () => {
        return null;
      },
    },
  ];

  useImperativeHandle(ref, () => ({
    editForm,
    dataSource,
    setDataSource,
    setEditableRowKeys,
  }));

  return (
    <EditableProTable<DataSourceType>
      columns={columns}
      rowKey="id"
      bordered
      size="small"
      value={dataSource}
      onChange={setDataSource}
      recordCreatorProps={{
        newRecordType: "dataSource",
        record: () => ({
          id: Date.now(),
        }),
      }}
      editable={{
        type: "multiple",
        editableKeys,
        form: editForm,
        actionRender: (row, config, defaultDoms) => {
          return [defaultDoms.delete];
        },
        onValuesChange: (record, recordList) => {
          setDataSource(recordList);
        },
        onChange: setEditableRowKeys,
      }}
    />
  );
});
